<template>
	<view>
		<!-- <view>智能匹配列表</view> -->
		<view class="scroll-v" v-if="list.length > 0">
			<view class="talent-list-item" v-for="(item,index) in list" :key="index">
				<view @tap="onPressToNavigateDetail(item)">
					<view class="pah-30 talent-item-info flex rcb">
						<view class="talent-name-info flex rcs">
							<!-- 名字 -->
							<view class="talent-name">{{item.name}}</view>
							<!-- 人才等级 -->
							<TalentLevel v-if='item.level!=null' :level="item.level" />
						</view>
						<!-- 状态 -->
						<TalentWorkStatus :status="item.status_str" />
					</view>
					<view class="pah-30 talent-detail-info flex rcb">
						<view class="detail-left-con">
							<view class="talent-profile-info flex rcs">
								<!-- 性别 -->
								<text class="detail-item">{{item.sex_str}}</text>
								<!-- 年纪 -->
								<text class="detail-item">{{item.age}}</text>
								<!-- 城市 -->
								<text class="detail-item">{{item.city}}</text>
								<text class="detail-item">|</text>
								<!-- 电话 -->
								<text class="detail-item detail-item-cur">{{item.phone}}</text>
							</view>
							<!-- 岗位名称 -->
							<!-- <TalentSkills :skills="item.position_name" /> -->
							<view class="flex source">
								<view class="source-title">简历来源:</view>
								<view class="source-detail">{{item.channel_name}}</view>
							</view>
							<view class="flex source">
								<view class="source-title">期望工作类型:</view>
								<view class="source-detail">{{item.job_wanted_str}}</view>
							</view>
						</view>
						<view class="detail-right-con pic-wrap btn-wrap flex ccc">
							<text class="cuIcon-right f-999"></text>
						</view>
					</view>
					<!-- <view class="line-style horizontal-line"></view> -->
				</view>
				<view class="flex btm-bigbox">
					<view class="img-box flex rcc" @tap="handleClickWeixin(item, 1)">
						<img class="img-sty" src="../../static/icon/icon_wechat.png" alt="">
						<view class="img-title">发微信</view>
					</view>
					<view class="img-box flex rcc" @tap="handleClickWeixin(item, 2)">
						<img class="img-sty" src="../../static/icon/icon_email.png" alt="">
						<view class="img-title">发邮件</view>
					</view>
					<!-- 后续优化 -->
					<view class="add-follow none">添加跟进</view>
					<view class="key-upbox flex">
						<img class="img-sty1" src="../../static/icon/icon_recommend.png" alt="">
						<view class="key-up" @tap="handleClickApply(item)">一键报名</view>
					</view>
				</view>
			</view>
			<view class="loadStatus">{{loadStatus}}</view>
		</view>
		<loading v-else-if="firstload"></loading>
		<!-- 无内容默认 -->
		<no-thing v-else></no-thing>
		
		<view class="cu-modal show" v-if="showConfirm">
		    <view class="cu-dialog dialog-container">
		        <view class="cu-bar dialog-title-view flex rcb">
		            <view class="dialog-title-style">温馨提示</view>
		            <view class="dialog-btn-close" @tap="onPressCancel">
		                <text class="cuIcon-close"></text>
		            </view>
		        </view>
		        <view class="dialog-content-view flex ccc">
		            <view class="dialog-context flex ccc">确定要一键报名吗？</view>
		        </view>
		        <view class="cu-bar dialog-btn-wrap flex rcb">
		            <view class="btn-item btn-cancel-item flex ccc" @tap="onPressCancel">取消</view>
		            <view class="btn-item btn-submit-item flex ccc" @tap="onPressSubmit">确定</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import loading from "../../components/common/loading.vue";
	import noThing from "../../components/common/no-thing.vue";
	export default {
		components: {
			loading,
			noThing,
		},
		data() {
			return {
				showConfirm: false,
				firstload: true,
				item: "",
				loadStatus: "",
				// 后台需要的数据
				page: 1,
				token: '',
				name: '', //人才姓名
				phone: '', //手机号码
				Channel_id: '', //渠道来源id
				talentLevel_id: '', //人才级别id
				wantPost_id: '', //意向岗位id
				ageRange_id: '', //年龄范围id
				jobType_id: '', //全职兼职id
				position_id: '', //从招聘任务到招聘情况，将招聘任务岗位列表的id传到这，智能匹配也需要这个参数
				company_id: '', //企业id
				station_id: '', //驻企列表id

				// 列表参数
				list: [],
				matchList: [],
				// 渠道来源
				index: -1,
				Channel: [],
				// 人才级别
				talentLevel: [],
				index1: -1,
				// 意向岗位
				wantPost: [],
				index2: -1,
				// 年龄范围
				ageRange: [],
				index3: -1,
				// 全职兼职
				jobType: [],
				index4: -1,
			}
		},
		onLoad(option) {
			this.loadStatus = '';
			// console.log(JSON.parse(option.items))
			let aList = JSON.parse(decodeURIComponent(option.items));
			this.matchList = aList;
			// uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			this._onRefresh();
			// console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			// console.log('_onLoadMore---->', '_onLoadMore');
			this.loadMore();
		},
		methods: {
			// 下拉刷新
			_onRefresh() {
				this.page = 1;
				this.getList();
				// console.log('_onRefresh---->', '_onRefresh');
			},
			// 上拉加载
			async loadMore() {
				this.loadStatus = "加载中..."
				this.page++;
				// console.log(this.page)
				this.getToken()
				// 发请求
				let url = this.ServicesApi.recommendList;
				let data = {
					page: this.page,
					limit: 10,
					name: this.name,
					phone: this.phone,
					channel: this.Channel_id, //简历来源id  尽量和api/personnel/selectWhereList对应
					level: this.talentLevel_id, //人才等级 尽量和api/personnel/selectWhereList对应
					work_status: '', //入职状态1在职-1未在职
					position_type_id: this.wantPost_id, //任务生产线类型  尽量和api/personnel/selectWhereList对应
					age_attr: this.ageRange_id, //年龄 最小-最大
					job_wanted: this.jobType_id, //1全职2非全职
					position_id: this.matchList.id, //从招聘任务到招聘情况，将招聘任务岗位列表的id传到这，智能匹配也需要这个参数
					company_id: this.matchList.company_id, //企业id
					station_id: '', //驻企列表id
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					let arr = result.data.data;
					this.list.push(...arr)
					if (arr.length < 10) {
						this.loadStatus = "没有更多数据"
					}
				} else {
					this.loadStatus = "没有更多数据"
				}
			
			},
			// 点击发微信
			async handleClickWeixin(item, type) {
				let url = type > 1 ? this.ServicesApi.send_Email : this.ServicesApi.send_WeChat;
				let data = {
					position_id: this.matchList.id,
					personnel_id: item.id,
				};
				let result = await this.Services.post(url, data);
				uni.showToast({
					icon: 'none',
					title: result.msg,
				});

				
			},
			// 取token
			getToken() {
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
			},
			// 请求搜索条件
			async getSearch() {
				this.getToken()
				// 发请求
				let url = this.ServicesApi.selectWhereList;
				let data = {
					limit: 10,
					page: this.page,
					name: this.name, //岗位类型名称
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					// console.log(res.data.data)
					// 渠道来源
					this.Channel = result.data[5]
					// 人才级别
					this.talentLevel = result.data[0]
					// 意向岗位
					this.wantPost = result.data[4]
					// 年龄范围
					this.ageRange = result.data[3]
					// 全职兼职
					this.jobType = result.data[1]
				}

				
			},
			// 请求获取列表
			async getList() {
				this.getToken()
				// 发请求
				let url = this.ServicesApi.recommendList;
				let data = {

					page: this.page,
					limit: 10,
					name: this.name,
					phone: this.phone,
					channel: this.Channel_id, //简历来源id  尽量和api/personnel/selectWhereList对应
					level: this.talentLevel_id, //人才等级 尽量和api/personnel/selectWhereList对应
					work_status: '', //入职状态1在职-1未在职
					position_type_id: this.wantPost_id, //任务生产线类型  尽量和api/personnel/selectWhereList对应
					age_attr: this.ageRange_id, //年龄 最小-最大
					job_wanted: this.jobType_id, //1全职2非全职
					position_id: this.matchList.id, //从招聘任务到招聘情况，将招聘任务岗位列表的id传到这，智能匹配也需要这个参数
					company_id: this.matchList.company_id, //企业id
					station_id: '', //驻企列表id
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.list = result.data.data;
					this.firstload = false;
				} else {
					this.firstload = false;
					uni.stopPullDownRefresh();
				}
			},
			
				onPressCancel() {
				    this.showConfirm = false;
				},
				async onPressSubmit() {
				    let url = this.ServicesApi.signUpAction;
				    let data = {
				        position_id: this.matchList.id, //岗位id
				        personnel_id: this.item.id, //人才id
				        company_id: this.matchList.company_id, //企业id
				    };
				    let result = await this.Services.post(url, data);
				    if (result.code == this.StatusCode.SUCCESS_CODE) {
				        uni.showToast({
				            icon: 'none',
				            title: result.msg,
				        });
				        this.showConfirm = false;
				        this._onRefresh();
				    } else {
				        uni.showToast({
				            icon: 'none',
				            title: result.msg,
				        });
				    }
				},
			// 点击一键报名
			handleClickApply(item) {
				this.item = item;
				this.showConfirm = true;
				return;
				this.getToken();
				uni.showModal({
					title: '温馨提示',
					content: '确认要一键报名吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: async res => {
						if (res.confirm) {
							let url = this.ServicesApi.signUpAction;
							let data = {
								position_id: this.matchList.id, //岗位id
								personnel_id: item.id, //人才id
								company_id: this.matchList.company_id, //企业id
							};
							let result = await this.Services.post(url, data);
							if (result.code == this.StatusCode.SUCCESS_CODE) {
								uni.showToast({
									icon: 'none',
									title: result.msg,
								});
								this.getList();
							} else {
								uni.showToast({
									icon: 'none',
									title: result.msg,
								});
							}
							// uni.request({
							// 	url: this.ServicesApi.signUpAction,
							// 	method: 'POST',
							// 	header: {
							// 		"content-type": "application/x-www-form-urlencoded"
							// 	},
							// 	data: {
							// 		token: this.token,
							// 		position_id: this.matchList.id, //岗位id
							// 		personnel_id: item.id, //人才id
							// 		company_id: this.matchList.company_id, //企业id
							// 	},
							// 	success: (res) => {
							// 		// 	console.log(res.data)
							// 		if (res.data.code == 0) {
							// 			uni.showToast({
							// 				title: res.data.msg
							// 			});
							// 			return false
							// 		} else {
							// 			this.getList();
							// 			uni.showToast({
							// 				title: '报名成功'
							// 			});
							// 		}
							// 	}
							// });
						} else if (res.cancel) {

						}
					}
				});

			},
			// 渠道来源
			ChannelChange(e) {
				uni.hideKeyboard();
				this.index = e.detail.value
				this.Channel_id = this.Channel[this.index].id
			},
			// 人才级别
			talentLevelChange(e) {
				uni.hideKeyboard();
				this.index1 = e.detail.value
				this.talentLevel_id = this.talentLevel[this.index1].id
			},
			// 意向岗位
			wantPostChange(e) {
				uni.hideKeyboard();
				this.index2 = e.detail.value
				this.wantPost_id = this.wantPost[this.index2].position_type_id
			},
			// 年龄范围
			ageRangeChange(e) {
				uni.hideKeyboard();
				this.index3 = e.detail.value
				this.ageRange_id = this.ageRange[this.index3].id
			},
			// 全职兼职
			jobTypeChange(e) {
				uni.hideKeyboard();
				this.index4 = e.detail.value
				this.jobType_id = this.jobType[this.index4].id
			},
			// 点击跳转详情
			onPressToNavigateDetail(item) {
				// console.log(item.id);
				const id = item.id
				uni.navigateTo({
					url: '/pages/talent_pool/talent_detail?id=' + id,
				});
			}
		},
		mounted() {
			this.getSearch();
			this.getList();
		}
	}
</script>

<style scoped lang="stylus">
	.loadStatus {
		height: 60upx;
		text-align: center;
		color: #ccc;
		font-size: 30upx;
		// background:pink;
		// margin-top:-30upx;
		line-height: 60upx;
		margin-bottom: 20upx;
	}

	.scroll-v {
		height: 100vh;
	}

	.img-sty1 {
		width: 38upx;
		height: 38upx;
		margin: 10upx 12upx 0 24upx;

	}

	.key-upbox {
		width: 200upx;
		height: 54upx;
		background: linear-gradient(90deg, rgba(74, 144, 226, 1) 0%, rgba(0, 102, 220, 1) 100%);
		border-radius: 2upx;
		line-height: 54upx;
		color: #fff;
		font-size: 28upx;
		text-align: center;
	}

	.add-follow {
		width: 160upx;
		height: 54upx;
		border-radius: 2upx;
		border: 2upx solid rgba(74, 144, 226, 1);
		font-size: 28upx;
		color: rgba(74, 144, 226, 1);
		text-align: center;
		line-height: 54upx;
	}

	.img-title {
		font-size 28upx;
		color #666666;
	}

	.img-box {}

	.img-sty {
		width: 30upx;
		height: 26upx;
		object-fit: contain;
		margin-right: 10rpx;
	}

	.btm-bigbox {
		border-top: 1upx solid #DBDBDB;
		justify-content: space-around;
		align-items: center;
		padding-top: 20rpx;
	}

	.list-box {
		padding: 20upx;
		margin: 40upx 0;
		background: #fff;
	}

	.btm-btn-box {
		justify-content: space-around;

	}

	.btm-btn {
		height: 50upx;
		width: 200upx;
		background: #0081FF;
		text-align: center;
		line-height: 50upx;
		color: #fff;
		margin: 30upx 0;
	}

	.source {
		margin: 24upx 0;

		.source-title {
			font-size: 28upx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}

		.source-detail {
			font-size: 28upx;
			font-weight: 400;
			margin-left: 24upx;
			color: rgba(51, 51, 51, 1);
		}
	}

	.talent-list-item {
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;

	}

	.talent-name {
		font-size: 36upx;
		color: #333333;
		margin-right: 20upx;
	}

	.set-height {
		height: 300upx;
	}

	.talent-profile-info {
		margin: 10upx 0 20upx;
	}

	.detail-item {
		color: #666666;
		font-size: 28upx;
		margin-right: 20upx;
	}

	.detail-item-cur {
		color: #333333;
	}

	.detail-right-con {
		width: 40upx;
		height: 40upx;
		margin-left: 10upx;
	}

	// .horizontal-line {
	// 	margin: 20upx 0;
	// }
	.btn-item {
		flex: 1;
		border: none;
	}

	.btn-item .btn-icon {
		margin-top: 10upx;
	}

	.recommend-btn-item .btn-icon {
		margin-top: 0;
		margin-right: 10upx;
	}

	.vertical-line {
		height: 80upx;
	}

	.set-bottom {
		height: 92upx;
		line-height: 92upx;
	}

	.set-width {
		width: 540upx;
	}

	.set-btn1 {
		height: 92upx;
		line-height: 92upx;
		background: #fff;
		border-right: 1px solid #D8D8D8;
		border-top: 1px solid #D8D8D8;
		width: 270upx;
		font-size: 30upx;
		text-align: center;
		color: #333;
	}

	.set-btn2 {
		height: 92upx;
		line-height: 92upx;
		background: #fff;
		width: 268upx;
		border-top: 1px solid #D8D8D8;
		font-size: 30upx;
		text-align: center;
		color: #4A90E2;
	}

	.set-textarea {
		background: #F3F3F3;
		width: 200upx;
		height: 160upx;
		margin-top: 0;
		text-align: left;
	}
</style>
